<script setup>
import bag from "../assets/mybag/bag-container.png";
import cardPic from "../assets/mybag/cardBg.png";
import { http } from "../services/service";
import cardList from "./components/cardList.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "../store/index";
import { useI18n } from "vue-i18n";
import { dateFormat } from "../utils/util";
const i18nUse = useI18n();
const store = useUserStore();
const router = useRouter();
const route = useRoute();
const back = () => {
  router.go(-1);
};
const historyList = ref([]);

const getMapping = (action) => {
  if (action?.endsWith("节点分红")) {
    return i18nUse.t("node_share");
  }
  if (action?.endsWith("平级奖励")) {
    return i18nUse.t("same_level");
  }
  if (action?.endsWith("回归")) {
    return i18nUse.t("return_back");
  }
  if (action?.endsWith("合成")) {
    return i18nUse.t("combine");
  }
  if (action?.endsWith("充值")) {
    return i18nUse.t("Recharge");
  }
  if (action?.endsWith("提现")) {
    return i18nUse.t("withdraw");
  }
  if (action?.endsWith("购买")) {
    return i18nUse.t("buy");
  }
  if (action?.endsWith("出售")) {
    return i18nUse.t("sell");
  }
  if (action?.endsWith("冻结")) {
    return i18nUse.t("Freeze");
  }
  if (action?.endsWith("解冻")) {
    return i18nUse.t("unFreeze");
  }
  if (action?.endsWith("直推奖励")) {
    return i18nUse.t("direction_prize");
  }
  if (action?.endsWith("间推奖励")) {
    return i18nUse.t("simple_push_prize");
  }
  if (action?.endsWith("管理奖励")) {
    return i18nUse.t("team_prize");
  }
};

const totalItem = ref(0);
const currentPage = ref(0);
const getHistory = () => {
  http
    .get(
      `/api/v1/center/myAccountRecord?telegramId=${store?.getUser?.telegramId}&page=${currentPage.value}`
    )
    .then(
      (response) => {
        const pagedata = response?.data?.data?.userCards;
        if (pagedata.first) {
          historyList.value = pagedata?.content;
        } else {
          historyList.value = [...historyList.value, ...pagedata?.content];
        }

        if (pagedata.last) {
          finished.value = true;
        }
        loading.value = false;
      },
      () => {}
    );
};

const getColor = (action) => {
  if (action?.endsWith("合成")) {
    return "#FF5656";
  }
  if (action?.endsWith("充值")) {
    return "#2CDB81";
  }
  if (action?.endsWith("提现")) {
    return "#2CDB81";
  }
  if (action?.endsWith("购买")) {
    return "#2CDB81";
  }
  if (action?.endsWith("出售")) {
    return "#2CDB81";
  }
  if (action?.endsWith("冻结")) {
    return "#2CDB81";
  }
  if (action?.endsWith("解冻")) {
    return "#2CDB81";
  }
};

const change = (e) => {
  currentPage.value = e;
  getHistory();
};
const onLoad = () => {
  currentPage.value = currentPage.value + 1;
  getHistory();
};

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
</script>

<template>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("assetsDetail") }}
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="$t('no_more')"
      :loading-text="$t('loading')"
      :offset="0"
      @load="onLoad"
    >
      <div class="container-history">
        <div class="list" style="color: #7a7b83">
          <div>{{ $t("quantity") }}</div>
          <div>TON</div>
          <div>{{ $t("rate") }}</div>
          <div>{{ $t("business") }}</div>
          <div>{{ $t("time") }}</div>
        </div>
        <div v-for="history in historyList" class="list">
          <div>
            {{ history.amount }}
          </div>
          <div>
            {{ history.tonAmount }}
          </div>
          <div>{{ history.tonUsdRate }}%</div>
          <div :style="{ color: '#2CDB81' }">
            {{ getMapping(history.des) }}
          </div>
          <div>
            {{ dateFormat(history.createTime || "") }}
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<style scoped lang="less">
.pagination-container {
  width: 90%;
  margin: 20px auto;
}

.confirm {
  width: 70%;
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translate(-50%);

  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.container-tab {
  margin-top: 30px;
}

.container-history {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #4a61f9;
  min-height: 50px;
  padding: 22px;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);

  .list {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-weight: 400;
    font-size: 14px;

    > div {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
